<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content" class="text-bold "> 首页</block>
		</cu-custom>

		<!-- 塔式轮播图-->
		<view class="tower-swiper" :style="{height: swiperHeight+'px'}" id="swiper001" @touchmove="TowerMove"
			@touchstart="TowerStart" @touchend="TowerEnd">
			<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index"
				:style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</view>
		</view>
		<scroll-view scroll-x class="nav text-center margin-top">
			<view class="flex text-center">
				<view class="cu-item flex-sub text-bold " style="font-family: 楷体;"
					:class="item.id==curTab?'text-blue cur':''" v-for="(item,index) in tables" :key="index"
					@tap="tabSelect" :data-id="item.id">
					{{item.icon}}
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view v-if="curTab==1" show-scrollbar=true :style="{height: scrollViewHeight+'px' }"
			:scroll-top="scrollTop" @scroll="scroll" scroll-y="true" @scrolltolower="loadingMoreItems"
			@scrolltoupper="btnTouchend">
			<item v-for="(item,index) in itemList" :key="index" :invitation="item" :imgList="item.pictures" 
				:publisher="item.publisher"></item>
		</scroll-view>
		<scroll-view v-else-if="curTab == 2">2</scroll-view>
		<scroll-view v-else-if="curTab == 3">3</scroll-view>
		<view v-if="can">
			<drag-button :isDock="true" :existTabBar="false" @btnClick="btnClick" @btnTouchstart="btnTouchstart"
				@btnTouchend="btnTouchend" />
		</view>
	</view>
</template>

<script>
	import item from './item.vue'
	import dragButton from "@/components/drag-button/drag-button.vue";
	var http = require('@/static/utils/request.js')
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				currentPage: 1,
				tables: [{
					id: 1,
					name: '最新发布',
					icon: '🆕'
				}, {
					id: 2,
					name: '正在进行',
					icon: '🚴'
				}, {
					id: 3,
					name: '已结束',
					icon: '🔚'
				}],
				curTab: 1,
				scrollViewHeight: 600,
				swiperHeight: 200,
				can: false,
				dotStyle: false,
				itemList: [],
				towerStart: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}]
			}
		},
		props: {},
		methods: {
			toDetail(){
				console.log('1111')
			},
			
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			btnClick() {
				uni.navigateTo({
					url: '../invitation/invitation'
				})
			},
			btnTouchstart() {

			},
			btnTouchend() {

			},
			loadingMoreItems(e) {
				let param = {
					current: this.currentPage,
					size: 3
				}
				http.queryNewBikeInvitations(param).then(res => {
					let records = res.data.data.records
					this.itemList = this.itemList.concat(records)
					this.currentPage++
				})
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			tabSelect(e) {
				this.curTab = e.currentTarget.dataset.id
			}
		},
		components: {
			item,
			dragButton
		},
		created() {
			this.TowerSwiper("swiperList")
			this.loadingMoreItems({
				current: this.currentPage,
				size: 3
			})
			this.can = !(uni.getStorageSync('userInfo') == undefined || uni.getStorageSync('userInfo') == '')
		},
		mounted() {
			let dom = uni.createSelectorQuery().in(this)
			let el = dom.select("#swiper001")
			let _this = this
			el.boundingClientRect(function(data) {

			}).exec(function() {

			})
			let systemInfo = uni.getSystemInfoSync()
			_this.scrollViewHeight = systemInfo.screenHeight - this.CustomBar - 30 - 150 - 30
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
